<script setup>
import { reactive, ref, watch } from 'vue'
import useDeptStore from '@/store/dept/index.js'
import { storeToRefs } from 'pinia'
import useRoleStore from '@/store/role/index.js'
import useLoginStore from '@/store/user/index.js'

const loginStore = useLoginStore()
const deptStore = useDeptStore()
const roleStore = useRoleStore()
const { deptTree } = storeToRefs(deptStore)

//dialog显示
const dialogVisible = ref(false)

//添加用户表单
const addForm = reactive({
  userId: '',
  nickName: '',
  deptId: '',
  phonenumber: '',
  email: '',
  userName: '',
  password: '',
  sex: '0',
  status: '0',
  roleIds: '',
  roleName: '',
  remark: ''
})

//校验规则
const formRef = ref()
const rules = reactive({
  nickName: [{ required: true, message: '昵称不能为空', trigger: 'blur' }],
  userName: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }],
  password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
})

//判断操作方法，true新增
const isNewOrUpdate = ref(true)
const isNewOrUpdateTitle = ref('新增用户')

//操作用户信息
const dialogConfirmBtn = async () => {
  //判断新增还是修改
  //新增，清除组件残留内容，检验表单
  if (isNewOrUpdate.value) {
    await formRef.value.validate()
    //保存用户信息
    const res = await loginStore.addUserInfoAction(addForm)
    if (res.code !== 1) {
      return
    }
  } else {
    //修改
    const res = await loginStore.editUserAction(addForm)
    if (res.code !== 1) {
      return
    }
  }
  //关闭弹窗
  dialogVisible.value = false
  //清除表单内容
  formRef.value.resetFields()
  //刷新数据
  await loginStore.getUserListInfoAction(1, 10)
}

//编辑回显信息
const dialogEditInfoBtn = (data) => {
  console.log('data:', data)
  isNewOrUpdateTitle.value = '编辑用户'
  //调用接口展示角色信息
  Object.assign(addForm, data)
}

//关闭dialog清除信息
const removeDialog = ref(true)
const closeDialogBtn = () => {
  Object.assign(addForm, {
    userId: '',
    nickName: '',
    deptId: '',
    phonenumber: '',
    email: '',
    userName: '',
    password: '',
    sex: '0',
    status: '0',
    roleIds: '',
    roleName: '',
    remark: ''
  })

  //清除校验信息
  formRef.value.resetFields()
}

//对外暴露方法
defineExpose({
  dialogVisible,
  dialogConfirmBtn,
  dialogEditInfoBtn,
  isNewOrUpdate,
  removeDialog
})
</script>

<template>
  <div class="dialog">
    <el-dialog
      v-if="removeDialog"
      @close="closeDialogBtn"
      v-model="dialogVisible"
      :title="isNewOrUpdateTitle"
      width="650px"
    >
      <el-form ref="formRef" :rules="rules" :inline="true" :model="addForm">
        <el-form-item label="用户昵称" prop="nickName" label-width="80px">
          <el-input v-model="addForm.nickName" placeholder="请输入用户昵称" />
        </el-form-item>
        <el-form-item label="归属部门" label-width="80px">
          <el-tree-select
            check-strictly="true"
            clearable
            :data="deptTree"
            style="width: 179px"
            v-model="addForm.deptId"
          />
        </el-form-item>
        <el-form-item label="手机号码" label-width="80px">
          <el-input v-model="addForm.phonenumber" placeholder="请输入手机号码" />
        </el-form-item>
        <el-form-item label="邮箱" label-width="80px">
          <el-input v-model="addForm.email" placeholder="请输邮箱" />
        </el-form-item>
        <el-form-item label="用户名称" prop="userName" label-width="80px">
          <el-input v-model="addForm.userName" placeholder="请输入用户名称" />
        </el-form-item>
        <el-form-item v-if="isNewOrUpdate" label="用户密码" prop="password" label-width="80px">
          <el-input
            style="width: 179px"
            type="password"
            show-password
            v-model="addForm.password"
            placeholder="请输入用户密码"
          />
        </el-form-item>
        <el-form-item label="用户性别" label-width="80px">
          <el-select
            v-model="addForm.sex"
            placeholder="请选择用户性别"
            size="large"
            style="width: 179px"
          >
            <el-option value="0" label="男" />
            <el-option value="1" label="女" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" label-width="80px">
          <el-select
            v-model="addForm.status"
            placeholder="请选择状态"
            size="large"
            style="width: 179px"
          >
            <el-option value="0" label="启用" />
            <el-option value="1" label="禁用" />
          </el-select>
        </el-form-item>
        <el-form-item label="角色" label-width="80px">
          <el-select
            v-model="addForm.roleIds"
            multiple
            placeholder="请选择角色"
            size="large"
            style="width: 179px"
          >
            <template v-for="(item, index) in roleStore.roleList.records" :key="item.roleId">
              <el-option :value="item.roleId" :label="item.roleName" />
            </template>
          </el-select>
        </el-form-item>
        <el-form-item></el-form-item>
        <el-form-item label="备注" label-width="80px" style="width: 100%">
          <el-input v-model="addForm.remark" placeholder="请选择备注" type="textarea" />
        </el-form-item>
      </el-form>
      <!--      底部-->
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="dialogConfirmBtn"> 确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="less">
.dialog {
  .el-form {
    margin-left: 25px;
    margin-top: 30px;
  }

  .el-form-item {
    font-weight: 700;
  }
}
</style>
